<template>
  <div>
    <div class="wrapper">
      <div class="container container-login">
        <a href="javascript:;" title="返回首页" class="logo">骡窝窝</a>
        <div class="signup-forms flip">
          <div
            class="login-box"
            id="_j_login_box"
            :style="{ display: !info ? 'block' : 'none' }"
          >
            <div class="inner inner_v2 clearfix">
              <div class="inner_v2_left">
                <form id="_j_login_form" action="javascript:;">
                  <div class="form-field">
                    <i v-show="isTops" style="font-style: normal; color: red;">
                      你输入的手机号不合法！
                    </i>
                    <input
                      id="inputPassword"
                      type="text"
                      placeholder="您的手机号"
                      autocomplete="off"
                      v-model.trim="phoneNumber"
                    />
                    <div class="err-tip"></div>
                  </div>
                  <div class="submit-btn">
                    <button id="_js_loginBtn" @click="nowRegisterButton">
                      立即注册
                    </button>
                  </div>
                </form>
                <div class="agreement">
                  注册视为同意
                  <a target="_blank" href="javascript:;">
                    《骡窝窝用户使用协议》
                  </a>
                </div>
                <div class="connect">
                  <p class="hd">用合作网站账户直接登录</p>
                  <div class="bd">
                    <a href="javascript:;" class="weibo">
                      <i></i>
                      新浪微博
                    </a>
                    <a href="javascript:;" class="qq">
                      <i></i>
                      QQ
                    </a>
                    <a href="javascript:;" class="weixin">
                      <i></i>
                      微信
                    </a>
                    <div class="clear"></div>
                  </div>
                </div>
              </div>
              <div class="inner_v2_right">
                <img src="../../public/img/qrcode.jpg" />
                <p>
                  扫一扫
                  <br />
                  下载骡窝窝APP
                </p>
              </div>
            </div>
          </div>
          <div class="signup-box" :style="{ display: info ? 'block' : 'none' }">
            <div class="add-info">
              <div class="hd">账号注册</div>
              <form id="editForm">
                <input type="hidden" name="phone" value="" id="phone" />
                <div class="form-field m-t-10">
                  <input
                    name="nickname"
                    type="text"
                    placeholder="您的昵称"
                    v-model.trim="nickname"
                  />
                  <div class="err-tip"></div>
                </div>
                <div class="form-field">
                  <input
                    name="password"
                    type="password"
                    placeholder="您的密码"
                    v-model.trim="password"
                  />
                  <div class="err-tip"></div>
                </div>
                <div class="form-field">
                  <input
                    name="rpassword"
                    type="password"
                    placeholder="确认密码"
                    v-model.trim="rpassword"
                  />
                  <div class="err-tip"></div>
                </div>

                <div class="form-field">
                  <div class="clearfix">
                    <a
                      href="javascript:void(0)"
                      class="vcode-send sms-code-send"
                      @click="codeButton"
                      v-show="!isShowTime"
                    >
                      {{ text }}
                    </a>
                    <a
                      href="javascript:void(0)"
                      class="vcode-send sms-code-send disabled"
                      v-show="isShowTime"
                    >
                      {{ count }}
                    </a>
                    <input
                      name="verifyCode"
                      type="text"
                      placeholder="短信验证码"
                      autocomplete="off"
                      class="vcode-input"
                      v-model.trim="verifyCode"
                    />
                  </div>
                  <div class="err-tip clearfix"></div>
                </div>
                <div class="submit-btn">
                  <button type="button" @click="submitButton">完成注册</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="fullscreen-bg" style="background-image: url(img/27.jpg);">
      <img
        src="../../public/img/27.jpg"
        style="width: auto; height: 657px; margin-top: -213px;"
      />
    </div>
  </div>
</template>

<script>
import { ApiCheckPhone, ApiRegister } from '@/utils/api.js'
export default {
  data() {
    return {
      phoneNumber: null,
      // 显示提示
      isTops: false,

      // 注册信息页面
      info: false,

      nickname: null,
      password: null,
      rpassword: null,
      verifyCode: null,

      // 显示倒计时
      isShowTime: false,
      timer: null,
      count: 5,
      text: '获取验证码',
    }
  },
  methods: {
    // 立即登录按钮
    async nowRegisterButton() {
      // 判断手机号是否合法
      let check = /^(?:(?:\+|00)86)?1\d{10}$/.test(this.phoneNumber)

      if (!check) return (this.isTops = true)

      let res = await ApiCheckPhone({ phone: this.phoneNumber })

      console.log(res.data)
      if (res.data.data === false) return alert('手机号已被注册！')

      this.info = true
    },

    // 获取验证码按钮
    codeButton() {
      if (this.password !== this.rpassword) return alert('两次密码不一致')

      this.isShowTime = true

      // 倒计时
      this.timer = setInterval(() => {
        this.count--
        if (this.count === 0) {
          clearInterval(this.timer)
          console.log('clear')
          this.count = 5
          this.isShowTime = false
          this.text = '重新获取验证码'
        }
      }, 1000)
    },

    // 注册完成按钮
    async submitButton() {
      if (!this.nickname) return alert('请填写用户名')
      if (!this.verifyCode) return alert('请填写验证码')

      let res = await ApiRegister({
        phone: this.phoneNumber,
        nickname: this.nickname,
        password: this.password,
        rpassword: this.rpassword,
        verifyCode: this.verifyCode,
      })
      console.log(res.data)
      if (res.data.code !== 200) return alert('注册失败！')
      this.$router.push('login')
    },
  },
}
</script>

<style scoped>
a {
  color: #ffa800;
  text-decoration: none;
}

.clear {
  clear: both;
  display: block;
  height: 0;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}

.fullscreen-bg {
  background-position: 50% 50%;
  background-size: cover;
  bottom: 0;
  right: 0;
  position: fixed;
  position: absolute \9;
  width: 100% \9;
  height: 100% \9;
  overflow: hidden;
  left: 0;
  top: 0;
}

.fullscreen-bg:before {
  background: url(../../public/img/full_page_vignette.png) 0 0
    rgba(0, 0, 0, 0.2);
  background-size: 100%;
  bottom: 0;
  content: '';
  left: 0;
  opacity: 0.5;
  position: fixed;
  right: 0;
  top: 0;
}

.fullscreen-bg:after {
  bottom: 0;
  content: '';
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}

.fullscreen-bg img {
  display: none;
  display: block \9;
  -ms-interpolation-mode: bicubic;
  filter: progid:DXImageTransform.Microsoft.Fade(duration=0.3);
  height: auto;
  margin: 0;
  visibility: visible;
  opacity: 1;
}

.wrapper {
  width: 980px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -245px 0 0 -490px;
  z-index: 2;
  color: #666;
}

.container {
  width: 370px;
  margin: -30px auto 0;
}

.container-login {
  width: 600px;
  margin: -30px auto 0;
}

.container a.logo {
  width: 136px;
  height: 69px;
  display: block;
  text-indent: -999px;
  overflow: hidden;
  background: url(../../public/img/mfw-logo-white4.png) no-repeat;
  margin: 0 auto;
}
.signup-forms {
  position: relative;
}

.signup-forms.flip .login-box {
  z-index: 10;
  display: block;
}

.signup-forms .login-box {
  position: absolute;
  z-index: 8;
  top: 0;
  left: 0;
  display: none;
}

.signup-forms .inner {
  width: 370px;
  padding-top: 26px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
}

.signup-forms .inner_v2 {
  width: 600px;
}

.bottom-link {
  width: 140px;
  margin: 10px auto;
  background-color: #000;
  border-radius: 15px;
  background-color: rgba(0, 0, 0, 0.4);
  text-align: center;
  font-size: 12px;
  color: #fff;
  padding: 4px 0;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}

.bottom-link a {
  color: #ffa800;
  margin-left: 6px;
}

.signup-forms .inner_v2 .inner_v2_left {
  float: left;
  width: 370px;
}

.signup-forms .inner_v2 .inner_v2_right {
  float: right;
  border-left: 1px solid #ebebeb;
  width: 208px;
  padding-left: 20px;
  height: 300px;
  padding-top: 20px;
}

.signup-forms .connect {
  clear: both;
  overflow: hidden;
  margin-top: 30px;
}

.signup-forms .connect .hd {
  padding: 15px 0 20px 24px;
  font-size: 12px;
  color: #999;
  border-top: 1px solid #ebebeb;
}

.signup-forms .connect .bd {
  padding: 0 0 0 25px;
  width: 348px;
  height: 84px;
  overflow: hidden;
}

.signup-forms .connect a {
  width: 58px;
  height: 84px;
  text-align: center;
  font-size: 12px;
  color: #999;
  display: inline-block;
  margin-right: 25px;
}

.signup-forms .connect a i {
  width: 42px;
  height: 42px;
  background: url(../../public/img/c_icon3.gif) no-repeat;
  display: block;
  margin: 0 0 4px 10px;
  cursor: pointer;
}

.signup-forms .connect a.weibo i {
  background-position: 0 0;
}

.signup-forms .connect a.qq i {
  background-position: -42px 0;
}

.signup-forms .connect a.weixin i {
  background-position: -294px 0;
}

.signup-forms .form-field {
  clear: both;
  width: 320px;
  margin: 0 auto;
  padding-top: 10px;
  zoom: 1 \9;
}

.signup-forms .form-link {
  clear: both;
  width: 320px;
  margin: 0 auto;
  padding: 8px 0 0;
  text-align: right;
}

.signup-forms .submit-btn {
  width: 320px;
  margin: 0 auto;
  padding: 12px 0 0;
}

.signup-forms .form-field input {
  width: 306px;
  height: 28px;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  font-size: 14px;
  color: #666;
  line-height: 28px;
  padding: 6px 0 6px 12px;
  box-shadow: 0 0 5px #fff;
  outline: 0;
  transition: box-shadow 0.25s linear 0s;
  -webkit-transition: box-shadow 0.25s linear 0s;
}

.signup-forms .err-tip {
  clear: both;
  /* background: url(../../public/img/err_ico2.png) 0 -60px no-repeat #fff; */
  padding: 0 0 3px 22px;
  width: 300px;
  font-size: 12px;
  color: #ff3c00;
  margin-top: 10px;
  top: 0;
  position: absolute;
  text-align: left;
  display: none;
}

.signup-forms .form-link a {
  color: #ffa800;
}

.signup-forms .submit-btn button {
  width: 320px;
  height: 42px;
  border: 0;
  background-color: #ffa800;
  border-radius: 5px;
  text-align: center;
  line-height: 40px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

.signup-forms .inner_v2 .inner_v2_right img {
  width: 180px;
  height: 180px;
}

.signup-forms .inner_v2 .inner_v2_right p {
  font-size: 15px;
  color: #797979;
  line-height: 24px;
  margin-top: 20px;
  text-align: center;
  width: 180px;
}

.signup-forms .agreement {
  width: 320px;
  margin: 0 auto;
  padding-top: 12px;
  font-size: 12px;
  color: #ccc;
  text-align: right;
  line-height: 1em;
}

.signup-forms .agreement a {
  color: #999;
  font-size: 12px;
  margin-left: 2px;
}

.signup-forms .signup-box {
  display: block;
}

.add-info {
  margin: 0 auto;
  text-align: center;
  width: 370px;
  background-color: #fff;
  border-radius: 5px;
  padding-bottom: 20px;
}

.add-info .hd {
  height: 56px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #d8d8d8;
  line-height: 56px;
  font-size: 18px;
  color: #666;
  padding: 0 26px;
  border-radius: 5px 5px 0 0;
  text-align: left;
}

#_j_signup_mobile_form,
#_j_complete_form {
  padding-top: 15px;
  position: relative;
}

input {
  outline: 0;
}
.signup-forms .form-field {
  clear: both;
  width: 320px;
  margin: 0 auto;
  padding-top: 10px;
  zoom: 1\9;
}
.add-info .m-t-10 {
  margin-top: 10px;
}
.signup-forms .form-field input {
  width: 306px;
  height: 28px;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  font-size: 14px;
  color: #666;
  line-height: 28px;
  padding: 6px 0 6px 12px;
  box-shadow: 0 0 5px #fff;
  outline: 0;
  transition: box-shadow 0.25s linear 0s;
  -webkit-transition: box-shadow 0.25s linear 0s;
}

.signup-forms .vcode-send {
  width: 120px;
  height: 40px;
  line-height: 40px;
  display: inline-block;
  margin-right: 10px;
  text-align: center;
  border: 1px solid #dfdfdf;
  border-radius: 4px;
  background: #f2f2f2;
  background: -moz-linear-gradient(top, #fff, #f2f2f2);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#f2f2f2));
  color: #333;
  vertical-align: top;
  float: left;
  overflow: hidden;
}
.signup-forms .form-field input {
  width: 306px;
  height: 28px;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  font-size: 14px;
  color: #666;
  line-height: 28px;
  padding: 6px 0 6px 12px;
  box-shadow: 0 0 5px #fff;
  outline: 0;
  transition: box-shadow 0.25s linear 0s;
  -webkit-transition: box-shadow 0.25s linear 0s;
}
.signup-forms .form-field input.vcode-input {
  width: 174px;
  float: right;
}

.signup-forms .submit-btn button {
  width: 320px;
  height: 42px;
  border: 0;
  background-color: #ffa800;
  border-radius: 5px;
  text-align: center;
  line-height: 40px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

.signup-forms .vcode-send.disabled {
  background: #f2f2f2;
  cursor: default;
  color: #b3b3b3;
}
</style>
